<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>页面管理</title>
    <link rel="stylesheet" href="/css/element-ui.css">
    <link rel="stylesheet" href="/css/page-management.css">
</head>
<body>
    <div id="app">
        <!-- 页面管理容器 -->
        <div class="page-container">
            <!-- 工具栏 -->
            <div class="toolbar">
                <el-button type="primary" @click="openCreateDialog">创建页面</el-button>
            </div>

            <!-- 页面列表 -->
            <el-table
                v-loading="loading"
                :data="pages"
                border
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="页面名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="path"
                    label="页面路径"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="icon"
                    label="图标">
                </el-table-column>
                <el-table-column
                    prop="sort"
                    label="排序"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="enabled"
                    label="状态"
                    width="100">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.enabled ? 'success' : 'danger'">
                            {{ scope.row.enabled ? '启用' : '禁用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="openEditDialog(scope.row)">编辑</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="deletePage(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 创建/编辑对话框 -->
            <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="500px">
                <el-form
                    ref="form"
                    :model="form"
                    :rules="rules"
                    label-width="100px">
                    <el-form-item label="页面名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="页面路径" prop="path">
                        <el-input v-model="form.path"></el-input>
                    </el-form-item>
                    <el-form-item label="图标" prop="icon">
                        <el-input v-model="form.icon"></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                        <el-input-number v-model="form.sort" :min="0"></el-input-number>
                    </el-form-item>
                    <el-form-item label="父页面" prop="parentId">
                        <el-select v-model="form.parentId" clearable placeholder="请选择父页面">
                            <el-option
                                v-for="page in pages"
                                :key="page.id"
                                :label="page.name"
                                :value="page.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态" prop="enabled">
                        <el-switch
                            v-model="form.enabled"
                            active-text="启用"
                            inactive-text="禁用">
                        </el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="savePage">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>

    <script src="/js/vue.js"></script>
    <script src="/js/element-ui.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/pages/page-management.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: PageManagement.data,
            methods: {
                ...PageManagement
            },
            mounted() {
                this.init();
            }
        });
    </script>
</body>
</html> 